import MainLayout from '../MainLayout';
import { Users, CreateUser, EditUser } from './../pages/users';
import { Rooms, CreateRoom, EditRoom } from './../pages/rooms';
import { Bookings, CreateBooking } from '../pages/bookings';
import { Navigate, createBrowserRouter,redirect } from "react-router-dom";
import Login from '../pages/Login';
import {authService} from '../services';
import {Guard} from "../components";
import { Dayjs } from '../pages/labs';
import React from 'react';
import { CustomErrorPage } from '../components';

const admin="Admin";
const routers = [
  {
    path: '/', element: <MainLayout />,
    loader() {  //TODO: try loader[Lab]
      if(!authService.isLogin()) {        
        redirect("/login");
      }   
      return { user:authService.getUser()}
    },
    children: [
      { path: "users", element:<Guard role={admin}> <Users /> </Guard>},  
      { path: "user-create", element:<Guard role={admin}> <CreateUser /></Guard> },
      { path: "user-edit/:userId/:userName/:email/:role", element:<Guard role={admin}> <EditUser /></Guard> },
      { path: "bookings", element:<Guard > <Bookings /></Guard> },     
      { path: "booking-create", element:<Guard> <CreateBooking /></Guard> },
      { path: "rooms", element:<Guard role={admin}> <Rooms /></Guard> },
      { path: "room-create", element: <Guard role={admin}><CreateRoom /></Guard> },
      { path: "room-edit/:roomId/:name/:capacity/:description", element:<Guard role={admin}> <EditRoom /> </Guard>},
      { path: "", element: <Navigate to='/bookings' /> },
    ]
  },
  {path:"dayjs",element:<Dayjs/>,errorElement:<CustomErrorPage error={'dayjs error'}/>},
  {
    path: "/login", element: <Login />,
    action: (args)=>{console.log(args); return 1} //TODOtry action[Lab]
  }
];
const router = createBrowserRouter(routers);

export default router;
